<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="favicon" href="/favicon.ico" />
  <title>Gia phả họ Đoàn Việt Nam</title>
  <link rel="stylesheet" href="/static/default/css/style.css" />
  <link rel="stylesheet" href="/static/default/css/start/jquery-ui-1.8.17.custom.css" />
  <script src="/static/default/js/jquery-1.7.1.min.js"></script>
  <script src="/static/default/js/jquery-ui-1.8.17.custom.min.js"></script>
  <script src="/static/default/js/jquery.carouFredSel-5.1.0.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$('#slideTop').hover(
  			function() {
	  			$('#carousel').trigger( 'pause' );
	  			$('#thumbnails').parent().animate({
	  			top: 270
	  			});
  			}, function() {  			
	  			$('#carousel').trigger( 'play' );
	  			$('#thumbnails').parent().animate({
	  			top: 375
	  			});
  			}
  			);
  		 $('#carousel').carouFredSel({
  			scroll: {
	  			fx: 'crossfade'
	  			},
  			auto: {
  				onBefore: function( oldI, newI ) {
  				$('#thumbnails').trigger( 'slideTo', [ '#thumbnails img[alt='+ newI.attr( 'alt' ) +']', -2 ] );
  				}
  			}
  			});
  			
  			$('#thumbnails').carouFredSel({
  				auto: false,
  				items: { start: -2 }
  			});

  			$('#thumbnails img').click(function() {
  				$('#thumbnails').trigger( 'slideTo', [ this, -2 ] );
  				$('#carousel').trigger( 'slideTo', [ '#carousel img[alt='+ $(this).attr( 'alt' ) +']' ] );  			
  			}).css( 'cursor', 'pointer' );		
  	  	});
	  	
  </script>

</head>
<body>
	<div id="wrapper">
	<div id="header" class="cf">
			<div id="logo"></div>
			<h1>LOGO IS HERE</h1>
			<div id="slideTop">
				<h1> IMAGES SLIDE IS HERE</h1>
				 <div id="carousel" class="cf">
				 	<img src="/images/album/1.jpg" alt="1" />
				 	<img src="/images/album/2.jpg" alt="2" />
				 	<img src="/images/album/3.jpg" alt="3"/>
				 	<img src="/images/album/4.jpg" alt="4" />
				 	<img src="/images/album/5.jpg" alt="5" />
				 	<img src="/images/album/6.jpg" alt="6"/>
				 	<img src="/images/album/7.jpg" alt="7" />
				 	<img src="/images/album/8.jpg" alt="8"/>
				 </div>
				 <div id="thumbnails">
				 	<img src="/images/album/1.jpg" alt="1" />
				 	<img src="/images/album/2.jpg" alt="2"/>
				 	<img src="/images/album/3.jpg" alt="3"/>
				 	<img src="/images/album/4.jpg" alt="4"/>
				 	<img src="/images/album/5.jpg" alt="5"/>
				 	<img src="/images/album/6.jpg" alt="6"/>
				 	<img src="/images/album/7.jpg" alt="7" />
				 	<img src="/images/album/8.jpg" alt="8"/>
				 </div>
			<!-- End #slideTop --></div>
		<!-- End #header --></div>